How would you implement offline-first data sync with IndexedDB and a remote API?

Question

ICSM Computer · Answer

To implement 
offline-first data sync with 
IndexedDB and a remote API, follow a clear pattern:
queue, store, detect, and sync. Here's a robust and scalable approach, step-by-step:
1. Architecture Overview
[UI] → writes/reads
 ↓             ↑
[IndexedDB] ←→ [Sync Queue]
       ↑           ↓
    [Sync Engine] (online)
          ↓
      [Remote API]
2. Core Components
Component
Responsibility
IndexedDB
Stores app data + write queue locally
Sync Queue
Temporarily holds offline changes
Remote API
Source of truth (backend)
Sync Engine
Detects connectivity and syncs when online
3. Implementation Steps
Step 1: Set Up Dexie.js (or plain IndexedDB)
const db = new Dexie('AppDB');
db.version(1).stores({
  items: '++id, name, updatedAt',
  syncQueue: '++id, operation, table, payload, timestamp'
});
items: Your main data tablesyncQueue: Holds add, update, delete ops while offline
Step 2: Queue Writes While Offline
Instead of calling the API directly, queue the change locally:
async function addItemOffline(item) {
  await db.items.add(item);
  await db.syncQueue.add({
    operation: 'add',
    table: 'items',
    payload: item,
    timestamp: Date.now()
  });
}
Step 3: Detect Online/Offline Status
window.addEventListener('online', syncWithServer);
Or manually:
if (navigator.onLine) {
  syncWithServer();
}
Step 4: Sync Engine
async function syncWithServer() {
  const queue = await db.syncQueue.orderBy('timestamp').toArray();
  for (const q of queue) {
    try {
      // Post to remote API
      await fetch(`/api/${q.table}/${q.operation}`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(q.payload)
      });
      // Remove from queue if successful
      await db.syncQueue.delete(q.id);
    } catch (err) {
      console.error("Sync failed:", err);
      break; // Stop on first failure
    }
  }
}
Step 5: Pull Updates from Server (Optional)
To keep IndexedDB fresh:
async function pullLatest() {
  const res = await fetch('/api/items');
  const items = await res.json();
  await db.items.clear();
  await db.items.bulkPut(items);
}
Run this on:
First app loadPeriodic intervalsAfter successful sync
Advanced Enhancements
Feature
How
Conflict resolution
Use timestamps or versioning (e.g., updatedAt)
Sync retries
Retry failed syncs with exponential backoff
Background sync (PWA)
Use Service Workers + Background Sync API
Delta sync
Send only changes, not full lists
Status UI
Show "Queued changes" or "Offline mode" indicators
Data Flow Summary
User adds data → stored in IndexedDB + syncQueue
Goes online → `syncQueue` processed and pushed to API
Server updates pulled back → `items` table updated
Tools You Can Use
Tool
Purpose
Dexie.js
Simplified IndexedDB
localForage
Unified local storage (IndexedDB fallback)
RxDB / PouchDB
Pre-built sync with CouchDB-like APIs
Workbox
Background sync + caching for PWAs

interview

How would you implement offline-first data sync with IndexedDB and a remote API?

ICSM Computer

Can you answer this question?

1 Answers

1. Architecture Overview

2. Core Components

3. Implementation Steps

Step 1: Set Up Dexie.js (or plain IndexedDB)

Step 2: Queue Writes While Offline

Step 3: Detect Online/Offline Status

Step 4: Sync Engine

Step 5: Pull Updates from Server (Optional)

Advanced Enhancements

Data Flow Summary

Tools You Can Use

Liked By

Component	Responsibility
IndexedDB	Stores app data + write queue locally
Sync Queue	Temporarily holds offline changes
Remote API	Source of truth (backend)
Sync Engine	Detects connectivity and syncs when online

Feature	How
Conflict resolution	Use timestamps or versioning (e.g., `updatedAt`)
Sync retries	Retry failed syncs with exponential backoff
Background sync (PWA)	Use Service Workers + Background Sync API
Delta sync	Send only changes, not full lists
Status UI	Show "Queued changes" or "Offline mode" indicators

Tool	Purpose
Dexie.js	Simplified IndexedDB
localForage	Unified local storage (IndexedDB fallback)
RxDB / PouchDB	Pre-built sync with CouchDB-like APIs
Workbox	Background sync + caching for PWAs